

// 获取商品的编号
$(function () {
    // 1.获取商品编号
    console.log("location", location);
    let [, goodsId] = location.search.substring(1).split('=')
    console.log("goodsId", goodsId);

    // 2.根据商品编号，获取商品详情

    $.get("goodsAndShoppingCart/getGoodsInfo.php", { goodsId: goodsId }, function (data) {
        // console.log("date", date);
        let htmlre = ""
        console.log("data", data);
        htmlre = `

               <h2 class="ming">${data.goodsName}</h2>
               <h2 class="money">${data.beiyong1}</h2>
               <p>产品编号:${data.beiyong5}</p>
               <span class="j">￥${data.goodsPrice}</span>

               <div id="tu3">
                    <ul class="blist clearfix">
                        <li class="active"><img src="${data.beiyong6}" alt=""></li>
                        <li><img src="${data.beiyong7}"alt=""></li>
                    </ul>
                 </div>

            <h3 id="riceWhite">颜色：${data.beiyong8}</h3>

          `;

        htmlre1 = `
                <img src="${data.beiyong9}" alt="" class="s1" />
                <img src="${data.beiyong10}" alt="" class="s2" />
                <img src="${data.beiyong11}" alt="" class="s3" />
                <img src="${data.beiyong12}" alt="" class="s4" />
                <img src="${data.beiyong13}" alt="" class="s5" />
          `;


        htmlre2 = `
                <img src="${data.beiyong9}" alt="" class="s1" />
                <img src="${data.beiyong10}" alt="" class="s2" />
                <img src="${data.beiyong11}" alt="" class="s3" />
                <img src="${data.beiyong12}" alt="" class="s4" />
                <img src="${data.beiyong13}" alt="" class="s5" />
        `;

        htmlre3 = `
                <img src="${data.beiyong9}" alt="" class="s1" />
                <img src="${data.beiyong10}" alt="" class="s2" />
                <img src="${data.beiyong11}" alt="" class="s3" />
                <img src="${data.beiyong12}" alt="" class="s4" />
                <img src="${data.beiyong13}" alt="" class="s5" />
                // <div class="mark"></div>
        `;



        $('#mg_right').html(htmlre + $("#mg_right").html());

        $('.smImage').html(htmlre1 + $(".smImage").html());
        $('.glassView').html(htmlre2 + $(".glassView").html());
        $('.bigImage').html(htmlre3 + $(".bigImage").html());

        // -----------------------------------------------------------
        // 1. js初始化效果
        // 1.1 第一个tab img 透明度为1
        x = 0;
        $(".smImage>img:eq" + "(" + x + ")").css({
            opacity: 1
        });

        // 1.2 第一张大图片显示
        $(".bigImage>img:eq" + "(" + x + ")").css({
            display: "block"
        });

        // 2. 分析交互效果
        // 2.1 tab切换
        $(".smImage>img").on("mouseenter", function (e) {
            // 2.2 上一个tab切换透明度变成0.6   上一张图片隐藏
            $(".smImage>img:eq" + "(" + x + ")").css({
                opacity: 0.6
            });
            $(".bigImage>img:eq" + "(" + x + ")").css({
                display: "none"
            });

            // 2.3 当前移入元素透明度为1  显示当前元素
            x = $(this).index(); // 获取当前显示元素的索引
            $(".smImage>img:eq" + "(" + x + ")").css({
                opacity: 1
            });
            $(".bigImage>img:eq" + "(" + x + ")").css({
                display: "block"
            });
        });
        // 3 显示，隐藏mark
        $(".bigImage").on("mouseenter", function () {
            $(".mark").css({
                display: "block"
            });
            // 显示隐藏放大镜
            $(".glassView").css({
                display: "block"
            });
            $(".glassView>img:eq" + "(" + x + ")").css({
                display: "block"
            });
        });
        $(".bigImage").on("mouseleave", function () {
            $(".mark").css({
                display: "none"
            });
            $('.glassView>img:eq' + "(" + x + ")").css({
                display: 'none'
            })
        });
        // 让mark 与 鼠标 的位置 保持一致
        // 3.1 确定鼠标移动范围：大图片，给大图片绑定鼠标移动事件
        $(".bigImage").on("mousemove", function (e) {
            // 处理移动业务
            // 3.2 让mark 随着岁表移动而移动
            // 获取鼠标的位置，求mark  移动的位移
            // console.log(e.pageX); // 鼠标距离页面左边的位置
            // console.log($(this).offset().left) // 元素距离页面左边的距离
            let X = e.pageX - $(this).offset().left - 100; // 鼠标在元素上的位置(相对元素)
            let Y = e.pageY - $(this).offset().top - 100; // 鼠标在元素上的位置(相对元素)
            if (X < 0) {
                X = 0;
            }
            if (X > 380) {
                X = 380;
            }
            if (Y < 0) {
                Y = 0;
            }
            if (Y > 380) {
                Y = 380;
            }
            $(".mark").css({
                left: X,
                top: Y
            });
            $(".glassView>img:eq(" + x + ")").css({
                left: -X * 2 + "px",
                top: -Y * 2 + "px"
            });
        });



        // d点击加入购物车

        $('.jiaru').mouseover(function () {
            $(this).css("background", "#ff4554");
            $(this).css("color", "#fff");
        })
        //鼠标移出时
        $('.jiaru').mouseout(function () {
            $(this).css("background", "");
            $(this).css("color", "");

        })

        $('.jiaru').on('click', function () {
            location.href = "ShoppingCart.html"
        })

        // 点击购买
        $('.goumai').mouseover(function () {
            $(this).css("background", "#ff4554");
            $(this).css("color", "#fff");
        })
        //鼠标移出时
        $('.goumai').mouseout(function () {
            $(this).css("background", "");
            $(this).css("color", "");

        })

        $('.goumai').on('click', function () {
            location.href = "ShoppingCart.html"
        })


    }, "json")
    // 
});




// funxFDJ();






